<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Dashboard</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap-3.3.7-dist/css/bootstrap.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/dashboard/css/dashboard.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap-editable/css/bootstrap-editable.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/uploadfile/css/fileinput.css}"/>

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>

    <!--<link rel="stylesheet" type="text/css" th:href="@{/bootstrap-3.3.7-dist/css/htmleaf-demo.css}"/>-->

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <header class="navbar navbar-static-top bs-docs-nav" id="top">
        <div class="container">
            <div class="navbar-header">
                <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar"
                        aria-controls="bs-navbar" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">@hj</a>
            </div>
            <nav id="bs-navbar" class="collapse navbar-collapse">

                <ul class="nav navbar-nav">

                    <li><a href="#addnewitem">Add Rubric</a></li>
                    <li><a href="#rubriclist">Rubric List</a></li>
                    <li><a href="#importstudents">Import Student Excel</a></li>
                    <li><a href="#markgroup">Mark Group</a></li>

                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <!-- <li><a href="http://mb.bootcss.com" onclick="_hmt.push(['_trackEvent', 'docv3-navbar', 'click', 'themes'])" target="_blank">主题/模板</a></li> -->
                    <li>
                        <a th:href="@{/teacher/logout}" title="Log Out">Logout
                            <i class="fa fa-sign-out"></i>
                        </a>
                        <!--<a href="http://www.bootcss.com/"-->
                           <!--onclick="_hmt.push(['_trackEvent', 'docv3-navbar', 'click', 'V3导航-Bootstrap中文网'])"-->
                           <!--target="_blank">Logout</a>-->
                    </li>
                </ul>
            </nav>
        </div>
    </header>

    <div class="bs-docs-header" id="content" tabindex="-1">
        <div th:include="slices :: dashboard-ad">dashboard-ad</div>
    </div>

    <div class="container bs-docs-container">

        <div class="row">
            <div class="col-md-9" role="main" style="background-color: #9acfea">
                <div class="bs-docs-section ds-hide">

                    <div class="addschema" th:include="slices :: schema">Add Schema</div>

                </div>
                <div class="bs-docs-section ds-hide">

                    <div th:include="slices :: rubriclist">Rubric List</div>
                </div>
                <div class="bs-docs-section ds-hide">

                    <div th:include="slices :: importstudents">Import Students</div>
                </div>

                <div class="bs-docs-section ">

                    <div th:include="slices :: markgroup">Select Mark Group</div>
                </div>
            </div>

            <div class="col-md-3" role="complementary">
                <nav class="bs-docs-sidebar hidden-print hidden-xs hidden-sm affix-top" th:include="slices :: ds-sidebar">

                </nav>
            </div>

        </div>

    </div>




<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
    <script th:src="@{/js/jquery-1.9.1.min.js}"></script>
    <script th:src="@{/bootstrap-3.3.7-dist/js/bootstrap.js}" type="text/javascript"></script>
    <script th:src="@{/bootstrap-editable/js/bootstrap-editable.min.js}"></script>
    <script th:src="@{/uploadfile/js/fileinput.js}"></script>

    <script type="text/javascript">
        /*<![CDATA[*/


        //import student list
        $("#file-4").fileinput({'showUpload':false, 'previewFileType':'any'});


        // click rubric  get rules
        $('.rubric .list-group-item').click(function(){
            var rid = $(this).attr("id");
//        alert(rid);
            $.ajax({
                type:"POST",
                url:"/teacher/getrubricsbyid",
                data:{"rid":rid},
                dataType:'json',
                success:function(data){
//                    alert(data.msg);
                    var r = JSON.parse(data.rules)
                    console.table(r);
                    var str = createTableForRules(r);
                    $(".rule table tbody").append(str);

                }
            });
        });

        function createTableForRules(rules){
            $(".rule table").find("tr td:not(:nth-child(1))").remove(); //删除table表中的除第一列之外的所有
            var str = "";
            for(var i in rules){//遍历json数组时，这么写p为索引，0,1
                str += "<tr><td style='display: none'>"+rules[i].id +"</td><td>"+rules[i].name+"</td><td>"+rules[i].percentage+"</td></tr>";
//            alert(rules[i].id + " " + rules[p].password);

            }
            return str;
        }

        // ajax save the new rubric
        $('#save-btn').click(function() {
            var xx =  {};
            var title =  $('#schematitle').text();
            var applydate =  $('#schemadate').text();
            xx['title']= title;
            xx['applydate']= applydate;
            $('.item').each(function(index){
                var a = $(this).children().eq(0).text();
                var b = $(this).children().eq(1).text();
                xx[a]=b;
            });
            var d = JSON.stringify(xx);
            console.log(d);
            $.ajax({
                type:"POST",
                url:"/teacher/addschema",
                data:{"d":d},
                dataType:'json',
                success:function(data){
                    alert(data.msg);
                    $(window.location).attr('href', '/teacher/dashboard');
                },
                complete:function () {
//                    setTimeout(function () {
//                        $(".rubrictab").click();
//                    },3000);
                }

            });
        });


        // here to hide / show section
        $('.bs-docs-sidebar .nav > li > a').click(function(){
            var currentID = $(this).attr("href");
//            alert(currentID);
            $(".bs-docs-section").addClass("ds-hide");
            $(currentID).parent().parent().removeClass("ds-hide");
        });

        // here to hide / show section
        $('#bs-navbar  li > a').click(function(){

            var currentID = $(this).attr("href");
//            alert(currentID);
            $(".bs-docs-section").addClass("ds-hide");
            $(currentID).parent().parent().removeClass("ds-hide");
        });
        // click add new item for rubric
        $(".additem").click(function(){
            addItem();
        });
        // add rule item
        function addItem(){
            var trNum = $("#schematable tr").length;
            var str ='<tr class="item"><td>Item'+ trNum+'</td><td>20</td><th onclick="remove(this)">Remove</th></tr>'
            $("#schematable tbody").append(str);
            $('#schematable td').editable({placement: 'bottom',mode:'inline'},'validate',function(v){
                if(!v) return 'Required field!';
            });
        }
        // remove rule item
        function remove(that){
            $(that).parent().remove();
        }


        //init editable
        $('#schematitle').editable({ placement: 'bottom'});
        $('#schematable td').editable({placement: 'bottom',mode:'inline'},'validate',function(v){
            if(!v) return 'Required field!';
        });
        $('#schemadate').editable({
            type:  'date',
            name:  'schemadate',
            title: 'Select Date ',
            placement: 'bottom'
        });

        /*]]>*/
    </script>
</body>
</html>